<template>
	<view class="clone">
	<view class="topun">
	<image :src="imageUrl + '/tesewuchan/tesewuchanfanhui2.png'" class="topun-image" @click="fanhuiditu"></image>
	<text class="yopun-text">搜索</text>
	</view>
	 <view class="input-container">
	    <image :src="imageUrl + '/images2/sosuohei.png'" class="search-icon"></image>
	    <input type="text" placeholder="靖港古镇" v-model="searchText" @keyup.enter="search" />
	</view>
	<view class="neirong-clone">
		
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl: this.$imageUrl,
			 searchText: ''	,
			}
		},
		methods: {
		 search() {
		      // 在这里执行搜索操作，可以根据搜索文本进行数据查询等
		      console.log('搜索内容：', this.searchText);	
		},
		fanhuiditu(){
			wx.redirectTo({
				url: '/pages/ditu/ditu'
			})
		}
	},
}
</script>

<style>
.clone{
	position: relative;
	display:flex;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	background-color: #E4EBE9;
}
.topun{
	position: absolute;
	display: flex;
	width: 100%;
	height: 50rpx;
	margin-top: 13%;
}
.topun-image{
	width: 38rpx;
	height: 38rpx;
	margin-top: 1%;
	margin-left: 2%;
}
.yopun-text{
	width: 64rpx;
	height: 48rpx;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 32rpx;
	color: #3F5649;
	line-height: 38rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
	margin-top: 1%;
	margin-left: 40%;
}
.input-container {
  position: relative;
}
.search-icon {
  position: absolute;
  z-index: 3;
  width: 32rpx;
  height: 32rpx;
  margin-top: 15vh;
  left: 30rpx;
}
input {
	 position: absolute;
     width: 685.61rpx;
	 height: 76.56rpx;
	 margin-top: 30%;
	 margin-left: 2%;
	 background-color:#D0D8D5;
     border: 1px solid #ccc;
     border-radius: 8rpx  8rpx  8rpx  8rpx;
	 padding-left: 20rpx; /* 增加左边内边距，让占位文本不那么靠近左边框 */
	 text-indent: 40rpx; /* 让占位文本向右移动指定距离 */
   }
.neirong-clone{
	position: absolute;
	width: 678.09rpx;
	height: 147.18rpx;
	margin-top: 22vh;
	margin-left: 5%;
	border: 2px solid red;
}
.fahui{
	position: absolute;
	z-index: 1;
	width: 38rpx;
	height: 38rpx;
}
</style>
